<template>
  <div>
    <!-- <div class="container"> -->
    <div class="slide">
      <swiper
        :indicator-dots="true"
        :autoplay="true"
        :interval="6000"
        :duration="1000"
        :circular="true"
        :indicator-active-color="'rgba(255,2555,255,0.7)'"
        style="height:100%"
      >
        <block
          v-for="(item,index) in adList"
          :key="index"
        >
          <swiper-item>
            <image
              :src="item.imgUrl"
              class="slide-image"
              mode="scaleToFill"
              @click="toAd(item,index)"
            />
          </swiper-item>
        </block>
      </swiper>
    </div>
    <div class="header">
      <span class="title">ئاۋات ۋىدىئولار</span>
      <span
        class="xsj"
        @click="moreVideo('hot')"
      >&#8249;</span>
      <span
        class="txt"
        @click="moreVideo('hot')"
      >تېخىمۇ كۆپ</span>
    </div>
    <div class="content">
      <div
        class="item"
        v-for="(item,index) in hotList"
        :key="index"
        @click="toVideo(item)"
      >
        <image :src="item.img_url" />
        <div class="title">{{item.name}}</div>
      </div>
    </div>
    <div
      class="my-ad"
      @click="openAD"
    >
      <img :src="middleAD.imgUrl">
    </div>
    <div class="header">
      <span class="title">يېڭى ۋىدىئولار</span>
      <span
        class="xsj"
        @click="moreVideo('new')"
      >&#8249;</span>
      <span
        class="txt"
        @click="moreVideo('new')"
      >تېخىمۇ كۆپ</span>
    </div>
    <div class="content">
      <div
        class="item"
        v-for="(item,index) in newList"
        :key="index"
        @click="toVideo(item)"
      >
        <image
          :src="item.img_url"
          mode="aspectFill"
        />
        <div class="title">{{item.name}}</div>
      </div>
    </div>
    <div
      class="advertise"
      style="margin-top:15rpx"
    >
      <ad unit-id="adunit-9155bec8aa4c0615"></ad>
    </div>
    <div class="fenlei">
      <span
        class="txt"
        v-for="(item,index) in lang"
        @click="changeStyle(index)"
        :key="index"
        :style="{backgroundImage:index==isActive?' linear-gradient(to right, rgb(106, 17, 203) 0%, rgb(37, 117, 252) 100%);':'linear-gradient(90deg,#c471f5, #fa71cd)'}"
      >{{item}}</span>
    </div>
    <div class="content">
      <div
        class="item"
        v-for="(item,index) in orderList"
        :key="index"
        @click="toVideo(item)"
      >
        <image
          :src="item.img_url"
          mode="aspectFill"
        />
        <div class="title">{{item.name}}</div>
      </div>
    </div>
    <div
      class="advertise"
      style="margin-top:15rpx"
    >
      <ad unit-id="adunit-9155bec8aa4c0615"></ad>
    </div>
    <div
      class="form-wrapper"
      v-show="formFlag"
    >
      <span class="wechat">
        <img src="../../../static/img/wechat.png">
      </span>
      <span class="txt">{{markWord}}</span>
      <div class="form">
        <form
          @submit="submit"
          report-submit='true'
        >
          <button form-type="submit">كىرىش</button>
          <button
            open-type="getUserInfo"
            style="visibility:hidden"
          ></button>
        </form>
      </div>

    </div>
  </div>
  <!-- </div> -->
</template>
<script>
import qcloud from "wafer2-client-sdk";
import store from "../../store/store";
import config from "@/config";

export default {
  onShareAppMessage(options) {
    return {
      title: "ئەڭ يېڭى نادىر ڧىلىملەرنى بۇ يەردىن كۆرۈڭ",
      path: `/pages/Video/main`,
      success: res => {},
      fail: () => {},
      complete: () => {}
    };
  },
  data() {
    return {
      markWord: "ئەپچاققا ھوقۇق بېرىڭ",
      formFlag: false,
      isActive: 0,
      hotList: "",
      newList: "",
      adList: "",
      orderList: "",
      adList: [
        "https://wx.2xur7.cn/static/images/swiper/ad2.png",
        "https://wx.2xur7.cn/static/images/swiper/ad1.png",
        "https://wx.2xur7.cn/static/images/swiper/ad3.png"
      ],
      lang: [
        "ھەممىباب",
        "ئۇيغۇرچە",
        "ياۋرو-ئامېرىكا",
        "ھىندىچە",
        "ئۆزبېكچە",
        "باشقا"
      ],
      activated: { color: "red" },
      middleAD: ""
    };
  },
  methods: {
    submit(e) {
      let formId = e.mp.detail.formId;
      let that = this;
      qcloud.setLoginUrl(config.loginUrl);
      wx.showLoading();
      qcloud.login({
        success: function(userInfo) {
          // console.log("登录成功", userInfo);
          userInfo.formId = formId;
          wx.request({
            url: "https://wx.2xur7.cn/weapp/saveUserInfo", //开发者服务器接口地址",
            data: userInfo, //请求的参数",
            method: "POST",
            dataType: "json", //如果设为json，会尝试对返回的数据做一次 JSON.parse
            success: res => {
              wx.hideLoading();
              userInfo.timeStamp = new Date().getTime();
              wx.setStorageSync("userInfo", userInfo);
              that.formFlag = false;
            },
            fail: () => {
              wx.hideLoading();
            },
            complete: () => {}
          });
        },
        fail: function(err) {
          wx.hideLoading();
        }
      });
    },
    toVideo(item) {
      // store.commit("playVideo", item);
      // console.log(item);
      wx.navigateTo({ url: `/pages/VideoDetail/main?vid=${item.video_url}` });
    },
    moreVideo(type) {
      wx.navigateTo({ url: "/pages/MoreVideo/main?type=" + type });
    },
    toAd(item, id) {
      if (item.type == "web") {
        wx.navigateTo({ url: "/pages/AD/main?from=videoTop&id=" + id });
      }
      if (item.type == "weapp") {
        let weappInfo = item.weappInfo;
        wx.navigateToMiniProgram({
          appId: weappInfo.appId,
          path: weappInfo.path
        });
      }
      if (item.type == "video") {
        wx.navigateTo({ url: `/pages/VideoDetail/main?vid=${item.vid}` });
      }
    },
    openAD() {
      let ad = this.middleAD;
      if (ad.type == "web") {
        wx.navigateTo({ url: "/pages/AD/main?from=videoM" });
      }
      if (ad.type == "weapp") {
        let weappInfo = ad.weappInfo;
        wx.navigateToMiniProgram({
          appId: weappInfo.appId,
          path: weappInfo.path
        });
      }
    },
    changeStyle(index) {
      this.isActive = index;
      let lang = "";
      wx.showLoading();
      switch (index) {
        case 0:
          lang = "unv";
          break;
        case 1:
          lang = "uy";
          break;
        case 2:
          lang = "gw";
          break;
        case 3:
          lang = "hindi";
          break;
        case 4:
          lang = "uz";
          break;
        case 5:
          lang = "other";
          break;
        default:
          break;
      }
      this.$http
        .get("https://wx.2xur7.cn/weapp/videoList?lang=" + lang)
        .then(res => {
          wx.hideLoading();
          this.orderList = res.data.data.list;
        });
    }
  },
  onLoad() {
    this.$http
      .get("https://wx.2xur7.cn/weapp/videoList?from=index")
      .then(res => {
        // console.log(res.data.data.list);
        this.hotList = res.data.data.hotList;
        this.newList = res.data.data.newList;
        this.orderList = res.data.data.uyList;
        // console.log(this.hotList);
      });
    wx.setNavigationBarTitle({ title: "ۋىدىئولار" });
    wx.setNavigationBarColor({
      frontColor: "#ffffff", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#ff6e96" //背景颜色值，有效值为十六进制颜色,
    });
    // let adList = wx.getStorageSync("config");
    // this.adList = adList.adList.videoPage;
  },
  created() {
    let { middleAD, topAD } = wx.getStorageSync("config").videoAD;
    this.middleAD = middleAD;
    this.adList = topAD;
    let userInfo = wx.getStorageSync("userInfo");
    let timeStamp = new Date().getTime();
    if (!userInfo.formId || !userInfo.timeStamp || !userInfo) {
      this.formFlag = true;
    } else if (
      userInfo.formId &&
      timeStamp - userInfo.timeStamp > 1000 * 60 * 60 * 24 * 4
    ) {
      this.markWord = "ئارخىپىڭىزنى يېڭىلاڭ";
      this.formFlag = true;
    }
  }
};
</script>
<style lang="scss">
.slide {
  height: 300rpx;
  overflow: hidden;
  .slide-image {
    width: 100%;
    height: 300rpx;
    // border-radius: 15rpx;
    overflow: hidden;
    imag {
      height: 100%;
    }
  }
}
.header {
  // border: 1px solid red;
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  margin: 10rpx auto;

  .xsj {
    float: left;
    // margin-top:  7rpx;
    margin-left: 20rpx;
    color: #929292;
    font-size: 51rpx;
  }
  .title {
    float: right;
    // margin-top: 22rpx;
    margin-right: 24rpx;
    color: #929292;
    font-size: 31rpx;
  }
  .txt {
    float: left;
    // margin-top:  7rpx;
    margin-left: 20rpx;
    color: #666;
    font-size: 25rpx;
  }
  ::after {
    content: "";
    display: "block";
    clear: both;
  }
}
.fenlei {
  width: 96%;
  margin: 0 auto;
  margin-top: 20rpx;
  border-top: 1px solid #ccc;
  display: grid;
  grid-template-columns: auto auto auto;
  text-align: center;
  .txt {
    color: white;
    display: inline-block;
    font-size: 26rpx;
    // border: 1px solid #fa709a;
    border-radius: 50rpx;
    height: 40rpx;
    line-height: 40rpx;
    padding: 10rpx 10rpx;
    margin: 10rpx 20rpx;
    // background-image: linear-gradient(90deg, #f093fb, #f5576c);
    background-image: linear-gradient(90deg, #c471f5, #fa71cd);
  }
}
.content {
  top: 0;
  width: 96%;
  display: grid;
  padding: 5rpx 10rpx;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  grid-gap: 17rpx;

  .item {
    border-radius: 20rpx;
    height: 200rpx;
    box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
    .title {
      direction: rtl;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 40rpx;
      background-color: rgba(0, 0, 0, 0.3);
      font-size: 25rpx;
      color: white;
      text-align: center;
      line-height: 40rpx;
      font-family: "Alp Ekran", Cambria, Cochin, Georgia, Times,
        "Times New Roman", serif, Arial, Helvetica, sans-serif !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
    }
  }
}
.form-wrapper {
  position: fixed;
  margin: 0 auto;
  top: 50vh;
  margin-top: -150rpx;
  right: 0;
  left: 0;
  bottom: 0;
  width: 400rpx;
  height: 300rpx;
  text-align: center;
  background-image: linear-gradient(
    to top,
    #c4c5c7 0%,
    #dcdddf 52%,
    #ebebeb 100%
  );
  border-radius: 30rpx;
  // opacity: 0.9;
  .wechat {
    display: inline-block;
    margin-top: 20rpx;
    display: flex;
    justify-content: center;
    image {
      width: 100rpx;
      height: 100rpx;
    }
  }
  .txt {
    display: inline-block;
    color: #999;
    margin-top: 18rpx;
    font-size: 31rpx;
  }
  .form {
    margin-top: 25rpx;
    button {
      color: white;
      outline: none;
      background-color: #13b24f;
      width: 250rpx;
      height: 70rpx;
      font-size: 30rpx;
      line-height: 70rpx;
    }
  }
}
</style>

